<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app" style="border:5px solid red;width:300px;padding:10px;">
      root<child></child>
    </div>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script>
      var grand1 = {
        template:'<div style="border:5px solid blue;padding:10px;">grand1</div>',
        data:()=>({name:'grand1'}),
      }
      var grand2 = {
        template:'<div style="border:5px solid blue;padding:10px;">grand2</div>',
        data:()=>({name:'grand2'}),
      }
      var child = {
        template:'<div ref="childDiv" @click="print" style="border:5px solid green;padding:10px;">child<grand1></grand1><grand2 ref="grand2"></grand2></div>',
        components:{grand1,grand2},
        methods:{
          print(){
            console.log(this.$root.name);//root
            console.log(this.$parent.name);//root
            console.log(this.$children);//grand
            console.log(this.$children[1].name);//grand
            console.log(this.$refs.grand2.name)
            console.log(this.$refs.childDiv)
          }
        }
      }
      //root是组件树的根
      var root = new Vue({
        el: "#app",
        data:()=>({name:'root'}),
        components: {
          child
        },
      });
    </script>
  </body>
</html>
